
<script setup>
import HomeCategory from '@/components/HomeComponents/HomeCategory.vue';
import HomeBanner from '@/components/HomeComponents/HomeBanner.vue';
import HomeHot from '@/components/HomeComponents/HomeHot.vue';
import HomeNew from '@/components/HomeComponents/HomeNew.vue';
import HomeProduct from '@/components/HomeComponents/HomeProduct.vue';
</script>

<template>
  <div class="container">
    <HomeCategory class="yc" />
    <HomeBanner :id="1" />
  </div>
  <HomeNew />
  <HomeHot />
  <HomeProduct />
</template>

<style lang="scss" scoped>
.yc {
  transform: translateX(-100%);
  transition: transform 0.5s ease-in-out;
}

.container {
  overflow: hidden;
}

.container:hover .yc {
  transform: translateX(0);
}
</style>